<template> 
  <a-row class="header-box">
    <a-page-header
      :title="$route.meta.title"
    >
    </a-page-header>
  </a-row>
  <a-divider :style="{marginTop:0}" />
  <a-alert
    message="说明："
    type="info"
    show-icon
  > 
    <template v-slot:icon><smile-outlined /></template>
    <template #description>
      <div>添加下载器，可进行推送下载。</div>
    </template>
  </a-alert>
  <a-divider />
  <!-- 操作栏 -->
  <a-row class="operation-box">
    <a-col :span="4">
      <a-input v-model:value="searchForm.keyword" placeholder="" allowClear>
        <template v-slot:prefix><search-outlined/></template>
      </a-input>
    </a-col>
    <a-col :span="20" align='right'>
      <a-space>
        <a-button type="default" @click="toAdd">
          <template v-slot:icon><plus-outlined/></template>
          新增
        </a-button>
        <a-button type="default" @click="reloadData">
          <template v-slot:icon><reload-outlined/></template>
        </a-button>
      </a-space>
    </a-col>
  </a-row>
  <!-- 数据表格 -->
  <a-row class="table-list-box">
      <a-table rowKey="id" :loading="dataLoading" :columns="columns" :data-source="searchForm.keyword?data.filter(item=>item.name.toLowerCase().indexOf(searchForm.keyword.toLowerCase())>=0||item.address.toLowerCase().indexOf(searchForm.keyword.toLowerCase())>=0):data" :pagination="false">
        <template #address="{ text }">
          <a target="_blank" :href="text">{{text}}</a>
        </template>
        <template v-slot:action="{ record }">
          <a-space>
            <a-button size="small" shape="round" @click="toView(record)">
              <template v-slot:icon><EyeFilled /></template>
            </a-button>
            <a-button size="small" shape="round" @click="toEdit(record)">
              <template v-slot:icon><EditFilled /></template>
            </a-button>
            <a-popconfirm
              title="您确定要删除该记录吗?"
              ok-text="删除"
              cancel-text="取消"
              @confirm="doDelete(record.id)"
            > 
              <a-button size="small" shape="round">
                <template v-slot:icon><DeleteFilled /></template>
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
  </a-row>
  <!-- 新增弹窗 -->
  <AddModal ref="addModal" :success='reloadData'/>
  <!-- 详情窗口 -->
  <DetailModal ref="detailModal" />
</template>

<script>
import BaseApi from '../../api/api.js'
import { SmileOutlined, SearchOutlined, ReloadOutlined, PlusOutlined, EditFilled, DeleteFilled, EyeFilled  } from '@ant-design/icons-vue'
import AddModal from './Add.vue'
import DetailModal from './Detail.vue'
export default {
  name: 'Client',
  components: {
    SmileOutlined,
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined,
    EditFilled,
    DeleteFilled,
    EyeFilled,
    AddModal,
    DetailModal
  },
  data() {
    return {
      module: 'client',
      searchForm: {},
      showPwd: false,
      columns: [
        {
          title: '序号',
          fixed: 'left',
          width: 80,
          customRender: ({ index })=>`${index+1}`,
        },
        { 
          title: '下载器名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
          slots: { customRender: 'address' },
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description',
        },
        {
          title: 'Action',
          key: 'action',
          fixed: 'right',
          width: 200,
          slots: { customRender: 'action' },
        },
      ],
      dataLoading:false, data:[],
      form: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    doSearch() {
      // this.data = this.data.filter(item => item.name.indexOf(this.searchForm)>0)
    },
    toggleEye(tag) {
      this.showPwd = tag === 1
    },
    reloadData(){
      this.searchForm = {}
      this.data = []
      this.loadData()
    },
    loadData() {
      this.dataLoading = true
      BaseApi.list(this.module).then(response=>{
        if (response.data.code === 1) {
          this.data = response.data.data
        } else {
          this.$message.error(`数据加载失败：${response.data.message}`)
        }
      }).catch((error)=>{
        this.$message.error(`数据加载失败：${error.message}`)
      }).then(()=>{
        this.dataLoading = false
      })
    },
    toAdd() {
      if (this.form.id) {
        this.form = {}
      }
      this.$refs.addModal.open(this.form)
    },
    toEdit(record) {
      this.form.id = record.id
      this.form.name = record.name
      this.form.type = record.type
      this.form.address = record.address
      this.form.loginname = record.loginname
      this.form.loginpwd = record.loginpwd
      this.form.volumeHost = record.volumeHost
      this.form.volumeContainer = record.volumeContainer
      this.form.description = record.description
      this.$refs.addModal.open(this.form)
    },
    doDelete(id) {
      BaseApi.del(this.module, id).then(response=>{
        if (response.data.code === 1) {
          this.$message.success('删除成功')
          this.reloadData()
        } else {
          this.$message.error(`删除失败：${response.data.message}`)
        }
      }).catch((error)=>{
        this.$message.error(`删除失败：${error.message}`)
      }).then(()=>{
      })
    },
    toView(record) {
      this.$refs.detailModal.open(record)
    },
  }
}
</script>